<style lang="less">
@import './change-password.less';
</style>
<template>
  <div class="passwordWrap">
    <Form ref="form" :model="form" :rules="ruleForm" :label-width="80">
      <FormItem label="原密码" prop="password">
        <Input type="password" v-model="form.password" clearable></Input>
      </FormItem>
      <FormItem label="新密码" prop="newPassword">
        <Input type="password" v-model="form.newPassword"></Input>
      </FormItem>
      <FormItem label="确认密码" prop="rNewPassword">
        <Input type="password" v-model="form.rNewPassword"></Input>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="handleSubmit('form')" style="margin-right: 8px">确认修改</Button>
        <Button @click="handleReset('form')">重置</Button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
import axios from 'axios'
import URL from '@/api/login'
import md5 from 'md5'
import { deepClone } from '@/libs/util'
export default {
  name: 'change_password',
  data () {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('原密码不能为空'))
      } else {
        callback()
      }
    }
    const validateNewPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('新密码不能为空'))
      } else {
        if (this.form.rNewPassword !== '') {
          // 对第二个密码框单独验证
          this.$refs.form.validateField('rNewPassword')
        }
        callback()
      }
    }
    const validateNewPassCheck = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入你的密码'))
      } else if (value !== this.form.newPassword) {
        callback(new Error('两个输入密码不匹配！'))
      } else {
        callback()
      }
    }
    return {
      form: {
        password: '',
        newPassword: '',
        rNewPassword: ''
      },
      ruleForm: {
        password: { validator: validatePass, trigger: 'blur' },
        newPassword: { validator: validateNewPass, trigger: 'blur' },
        rNewPassword: { validator: validateNewPassCheck, trigger: 'blur' }
      }
    }
  },
  methods: {
    handleSubmit (name) {
      this.$refs[name].validate(async (valid) => {
        if (valid) {
          let submitData = deepClone(this.form)
          submitData.password = md5(submitData.password)
          submitData.newPassword = md5(submitData.newPassword)
          submitData.rNewPassword = md5(submitData.rNewPassword)
          let result = await axios.post(URL.changePassword, submitData).then(res => {
            return res.data
          })
          if (result.code === 0) {
            this.$Message.success(result.message)
            this.$router.push({ name: 'login' })
          } else if (result.code === 9999) {
            this.$Message.error(result.message)
            this.$router.push({ name: 'login' })
          } else {
            this.$Message.error(result.message)
          }
        }
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    }
  }
}
</script>
